<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="槽号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="slotName"> 
               <a-select show-search placeholder="请选择槽号"  v-model="model.slotName">
                <a-select-option v-for="item in slotIdList" :key="item" :value="item">
                  {{ item }}
                </a-select-option>
              </a-select>

            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="type"> 
                <a-select  v-model="model.type" defaultValue="新极" style="width: 100px" prop="type">
                  <a-select-option value="新极">新极</a-select-option>
                  <a-select-option value="残极">残极</a-select-option>
                </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="使用天数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="timeLimit">
              <a-input-number v-model="model.timeLimit"  placeholder="请输入使用天数" style="width: 100px" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="A面" :labelCol="labelCol" :wrapperCol="wrapperCol"> 
               <j-checkbox
                v-model="positionA"
                :options="jCheckboxOptionsA"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="B面" :labelCol="labelCol" :wrapperCol="wrapperCol"> 
               <j-checkbox
                v-model="positionB"
                :options="jCheckboxOptionsB"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark"> 
              <a-textarea v-model="model.remark" rows="4" placeholder="请输入备注" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import JCheckbox from '@/components/jeecg/JCheckbox'
  export default {
    name: 'AnodeChangeForm',
    components: {
         JCheckbox,
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
          timeLimit:35,
          type:'新极',
         },
        positionA:[],
        positionB:[],
        positionList:[],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
           slotName: [
              { required: true, message: '请输入槽号!'},
           ],
           type: [
              { required: true, message: '请输入类型!'},
           ],
           timeLimit: [
              { required: true, message: '请输入使用天数!'},
           ],
           position: [
              { required: true, message: '请输入位置!'},
           ],
        },
        url: {
          add: "/anodeChange/anodeChange/add",
          edit: "/anodeChange/anodeChange/edit",
          queryById: "/anodeChange/anodeChange/queryById"
        },
        jCheckboxOptionsA: [
          {label: '1', value: 'A-01'},
          {label: '2', value: 'A-02'},
          {label: '3', value: 'A-03'},
          {label: '4', value: 'A-04'},
          {label: '5', value: 'A-05'},
          {label: '6', value: 'A-06'},
          {label: '7', value: 'A-07'},
          {label: '8', value: 'A-08'},
          {label: '9', value: 'A-09'},
          {label: '10', value: 'A-10'},
          {label: '11', value: 'A-11'},
          {label: '12', value: 'A-12'},
          {label: '13', value: 'A-13'},
          {label: '14', value: 'A-14'},
          {label: '15', value: 'A-15'},
          {label: '16', value: 'A-16'},
          {label: '17', value: 'A-17'},
          {label: '18', value: 'A-18'},
          {label: '19', value: 'A-19'},
          {label: '20', value: 'A-20'},
          {label: '21', value: 'A-21'},
          {label: '22', value: 'A-22'},
          {label: '23', value: 'A-23'},
          {label: '24', value: 'A-24'},
        ],
        jCheckboxOptionsB: [
          {label: '1', value: 'B-01'},
          {label: '2', value: 'B-02'},
          {label: '3', value: 'B-03'},
          {label: '4', value: 'B-04'},
          {label: '5', value: 'B-05'},
          {label: '6', value: 'B-06'},
          {label: '7', value: 'B-07'},
          {label: '8', value: 'B-08'},
          {label: '9', value: 'B-09'},
          {label: '10', value: 'B-10'},
          {label: '11', value: 'B-11'},
          {label: '12', value: 'B-12'},
          {label: '13', value: 'B-13'},
          {label: '14', value: 'B-14'},
          {label: '15', value: 'B-15'},
          {label: '16', value: 'B-16'},
          {label: '17', value: 'B-17'},
          {label: '18', value: 'B-18'},
          {label: '19', value: 'B-19'},
          {label: '20', value: 'B-20'},
          {label: '21', value: 'B-21'},
          {label: '22', value: 'B-22'},
          {label: '23', value: 'B-23'},
          {label: '24', value: 'B-24'},
        ],
        slotIdList:[],
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
      this.loadDataSlot();
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        const that = this;
        that.positionList =[];
        if(that.positionA.length>0 && that.positionA.split(',').length>0){
            that.positionList = that.positionA.split(',');
        }
        if(that.positionB.length>0 && that.positionB.split(',').length>0){
            that.positionList = that.positionList.concat(that.positionB.split(','));
        } 
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            if(that.positionList.length==0){
              that.$message.warning("请选择位置");
              return;
            }
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }  
            that.model.position = that.positionList.pop(); 
            that.save(httpurl,method);
          } 
        })
      },
      save(httpurl,method){
        const that = this;
         httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){ 
                if(that.positionList.length == 0){
                   that.confirmLoading = false;
                   that.$message.success(res.message);
                   that.$emit('ok'); 
                }else{
                  that.model.position = that.positionList.pop(); 
                  that.save(httpurl,method);
                }
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
          
            })
      },
    loadDataSlot() {
      getAction('/dataSlot/dataSlot/list', { pageSize: 9999 })
        .then((res) => {
          if (res.success) {
            var dataSource = res.result.records
            for (let i = 0; i < dataSource.length; i++) {
              this.slotIdList.push(dataSource[i].slotId)
            }
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    }
  }
</script>